<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>按钮组件</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
    <!--<link id="layui-theme-dark-css" rel="stylesheet">
    <link id="xm-select-dark-css" rel="stylesheet">-->
</head>
<body class="layui-layout-body pear-admin">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                开发环境
            </div>
            <div class="layui-card-body">
                Pear Button 参考 Element UI 样式 ，提供 Button 服务
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true"><link rel="stylesheet"
                                                                            href="component/pear/css/pear.css"/>
								或
								<link rel="stylesheet" href="component/pear/css/pear-module/button.css"/>
							</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                简单使用
            </div>
            <div class="layui-card-body">
                <button class="layui-btn">Default Button</button>&nbsp;&nbsp;
                <button class="layui-btn">Primary Button</button>&nbsp;&nbsp;
                <br>
                <br>
                <button class="layui-btn"> Button-Primary</button>&nbsp;&nbsp;
                <button class="layui-btn layui-btn-success"> Button-Success</button>&nbsp;&nbsp;
                <button class="layui-btn layui-btn-danger"> Button-danger</button>&nbsp;&nbsp;
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								<button class="layui-btn"> Default Button </button>
								<button class="layui-btn" dashed> Dashed Button </button>
								<button class="layui-btn"> Primary Button </button>
								<button class="layui-btn"> Button-Primary </button>
								<button class="layui-btn layui-btn-success"> Button-Success </button>
							</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                简约样式
            </div>
            <div class="layui-card-body">
                <button plain class="layui-btn"> Button-Primary</button>&nbsp;&nbsp;
                <button plain class="layui-btn layui-btn-success"> Button-Success</button>&nbsp;&nbsp;
                <button plain class="layui-btn layui-btn-danger"> Button-Danger</button>&nbsp;&nbsp;
                <button plain class="layui-btn layui-btn-warming"> Button-Warming</button>&nbsp;&nbsp;
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								<button class="layui-btn"> Default Button </button>
								<button class="layui-btn" dashed> Dashed Button </button>
								<button class="layui-btn"> Primary Button </button>
								<button class="layui-btn"> Button-Primary </button>
								<button class="layui-btn layui-btn-success"> Button-Success </button>
							</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                按钮大小
            </div>
            <div class="layui-card-body">
                <button class="layui-btn layui-btn-lg"> Button-Lg</button>&nbsp;&nbsp;
                <button class="layui-btn"> Button-Default</button>&nbsp;&nbsp;
                <button class="layui-btn layui-btn-sm"> Button-Sm</button>&nbsp;&nbsp;
                <button class="layui-btn layui-btn-xs"> Button-Xs</button>&nbsp;&nbsp;
                <br>
                <br>
                <button class="layui-btn layui-btn-warming layui-btn-lg"> Button-Lg</button>&nbsp;&nbsp;
                <button class="layui-btn layui-btn-warming"> Button-Default</button>&nbsp;&nbsp;
                <button class="layui-btn layui-btn-warming layui-btn-sm"> Button-Sm</button>&nbsp;&nbsp;
                <button class="layui-btn layui-btn-warming layui-btn-xs"> Button-Xs</button>&nbsp;&nbsp;
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								<button class="layui-btn layui-btn-lg"> Button-Lg </button>&nbsp;&nbsp;
								<button class="layui-btn"> Button-Default </button>&nbsp;&nbsp;
								<button class="layui-btn layui-btn-sm"> Button-Sm </button>&nbsp;&nbsp;
								<button class="layui-btn layui-btn-xs"> Button-Xs </button>&nbsp;&nbsp;
							</pre>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                按钮组
            </div>
            <div class="layui-card-body">
                <div class="layui-btn-group">
                    <button class="layui-btn" round> Button-One</button>
                    <button class="layui-btn" round> Button-Two</button>
                    <button class="layui-btn" round> Button-Three</button>
                </div>
                <br>
                <br>
                <div class="layui-btn-group">
                    <button class="layui-btn"> Button-One</button>
                    <button class="layui-btn"> Button-Two</button>
                    <button class="layui-btn"> Button-Three</button>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								<div class="layui-btn-group">
								    <button class="layui-btn"> Button-One </button>
								    <button class="layui-btn"> Button-Two </button>
								    <button class="layui-btn"> Button-Three </button>
								</div>
							</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                Load 自动
            </div>
            <div class="layui-card-body">
                <button class="layui-btn" load> 加载 600 ms</button>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								layui.use(["button"], function() {
								    var button = layui.button;

									button.load({
								        elem:'[load]',
								        time: 600,
								        done: function(){
									        popup.success("加载完成");
								        }
								    })
								})
							</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                Load 手动
            </div>
            <div class="layui-card-body">

                <button class="layui-btn" loading> 开始</button>

                <button class="layui-btn layui-btn-danger" stop> 停止</button>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								layui.use(["button"], function() {
								    var button = layui.button;

									var dom = button.load({
								        elem:'[load]',
								    })

								    dom.stop(function() {
								        popup.failure("已停止");
								    });
								})
							</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                本页跳转
            </div>
            <div class="layui-card-body">
                <button class="layui-btn" to> 本页跳转</button>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">显示代码</h2>
                <div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								layui.use(["jquery"], function() {
								    var $ = layui.jquery;

								    $("[to]").click(function(){
								        top.layui.frame.changePageByElement("content","http://www.baidu.com","百度一下",true)
								    })
								})
							</pre>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
  layui.use(['element', 'code', 'jquery', "button", "popup"], function () {
    var element = layui.element;
    var $ = layui.jquery;
    var popup = layui.popup;
    var button = layui.button;

    layui.code();

    $("[load]").click(function () {
      button.load({
        elem: '[load]',
        time: 600,
        done: function () {
          popup.success("加载完成");
        }
      })
    })

    var dom;

    $("[loading]").click(function () {
      dom = button.load({
        elem: '[loading]'
      })
    })

    $("[stop]").click(function () {
      dom.stop(function () {
        popup.failure("已停止");
      });
    })

    $("[to]").click(function () {
      top.layui.admin.jump(14, "百度一下", "http://www.bing.com", true)
    })
  })
</script>
</body>
</html>
